---
type: tutorial
title: 创建社交媒体 Footer
description: |-
  教程：搭建你的 Astro 博客 -
  从头开始构建一个新的组件，然后将其添加到你的页面中
---
import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

<PreCheck>
  - 创建一个页脚组件
  - 创建并传递参数到一个社交媒体组件
</PreCheck>

现在你已经在页面上使用了 Astro 组件，是时候在一个组件中使用另一个组件！

## 创建一个页脚组件

<Steps>
1. 创建一个新文件：`src/components/Footer.astro`。

2. 将以下代码复制到你的新文件 `Footer.astro` 中。

    ```astro title="src/components/Footer.astro"
    ---
    const platform = "github";
    const username = "withastro";
    ---

    <footer>
      <p>在 <a href={`https://www.${platform}.com/${username}`}>{platform}</a> 上，了解有关我的项目的更多信息！</p>
    </footer>
    ```
</Steps>

### 导入并使用 `Footer.astro`

<Steps>
1. 在每个 Astro 页面（`index.astro`、`about.astro` 和 `blog.astro`）的前置元数据中添加以下导入语句：

    ```js
    import Footer from '../components/Footer.astro';
    ```

2. 在每个页面的 Astro 模板中，在 `</body>` 标签之前添加一个新的 `<Footer />` 组件，以在页面底部显示页脚。

    ```astro ins={1}
       <Footer />
      </body>
    </html>
    ```

3. 在浏览器预览中，检查每个页面是否都能看到新的页脚文本。
</Steps>

<Box icon="puzzle-piece">

## 自己试一试 - 个性化你的页脚

自定义你的页脚，展示多个社交网络（如 Instagram、Twitter、LinkedIn）并包括你的用户名以直接链接到你自己的个人资料。

</Box>

### 代码检查
如果你一步一步按照教程进行操作，你的 `index.astro` 文件应该如下所示：

```astro title="src/pages/index.astro"
---
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';

const pageTitle = '首页';
---

<html lang="zh-CN">
	<head>
		<meta charset="utf-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta name="viewport" content="width=device-width" />
		<meta name="generator" content={Astro.generator} />
		<title>{pageTitle}</title>
	</head>
	<body>
    <Navigation />
		<h1>{pageTitle}</h1>
		<Footer />
	</body>
</html>
```

## 创建一个社交媒体组件

由于你可能有多个可以展示的社交媒体账号，你可以创建一个单独的、可重用的组件，并在多个位置显示它。每次显示时，你将传递不同的参数（`props`）给它，即社交媒体名称和你在该社交媒体上的用户名。

<Steps>
1. 创建一个新文件：`src/components/Social.astro`。

2. 将以下代码复制到你的新文件 `Social.astro` 中。

    ```astro title="src/components/Social.astro"
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>
    ```
</Steps>

### 在你的页脚中导入并使用 `Social.astro`

<Steps>
1. 修改 `src/components/Footer.astro` 中的代码，导入并使用这个新组件三次，每次传递不同的**组件参数**作为 props：

    ```astro title="src/components/Footer.astro" del={2,3,8} ins={4,9-11}
    ---
    const platform = "github";
    const username = "withastro";
    import Social from './Social.astro';
    ---

    <footer>
      <p>在 <a href={`https://www.${platform}.com/${username}`}>{platform}</a> 上，了解有关我的项目的更多信息！</p>
      <Social platform="twitter" username="astrodotbuild" />
      <Social platform="github" username="withastro" />
      <Social platform="youtube" username="astrodotbuild" />
    </footer>
    ```

2. 检查浏览器上的预览，你应该在每个页面上看到新的页脚，显示链接到这三个平台的链接。
</Steps>

## 给你的社交媒体组件添加样式

<Steps>
1. 通过在 `src/components/Social.astro` 中添加一个 `<style>` 标签，自定义链接的外观。

    ```astro title="src/components/Social.astro" ins={6-17} 'class="social-platform'
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>

    <style>
      a {
        padding: 0.5rem 1rem;
        color: white;
        background-color: #4c1d95;
        text-decoration: none;
      }
    </style>
    ```

2. 同样，在 `src/components/Footer.astro` 中添加一个 `<style>` 标签，以改善其内容的布局。

    ```astro title="src/components/Footer.astro" ins={4-10}
    ---
    import Social from './Social.astro';
    ---
    <style>
      footer {
        display: flex;
        gap: 1rem;
        margin-top: 2rem;
      }
    </style>

    <footer>
      <Social platform="twitter" username="astrodotbuild" />
      <Social platform="github" username="withastro" />
      <Social platform="youtube" username="astrodotbuild" />
    </footer>
    ```

3. 再次检查浏览器上的预览，确认每个页面都显示更新后的页脚。
</Steps>

<Box icon="question-mark">

### 自测

1. 你需要在 Astro 组件的前置元数据中写入什么代码来将 `title`、`author` 和 `date` 的值作为 props 接收？

    <MultipleChoice>
      <Option isCorrect>
        `const { title, author, date } = Astro.props;`
      </Option>
      <Option>
        `import BlogPost from '../components/BlogPost.astro'`
      </Option>
      <Option>
        `<BlogPost title="My First Post" author="Dan" date="12 Aug 2022" />`
      </Option>
    </MultipleChoice>
    

2. 如何将值作为 props 传递给 Astro 组件？
    <MultipleChoice>
      <Option>
        `const { title, author, date } = Astro.props;`
      </Option>
      <Option>
        `import BlogPost from '../components/BlogPost.astro'`
      </Option>
      <Option isCorrect>
        `<BlogPost title="My First Post" author="Dan" date="12 Aug 2022" />`
      </Option>
    </MultipleChoice>
</Box>

<Box icon="check-list">

## 任务清单

<Checklist>
- [ ] 我可以在 `src/components/` 中创建新的 `.astro` 组件
- [ ] 我可以在其他 Astro 组件内部导入和使用 Astro 组件。
- [ ] 我可以将参数传递给 Astro 组件。
</Checklist>
</Box>

### 相关资源

- [Astro 组件中的组件参数](/zh-cn/basics/astro-components/#组件参数)
